当前位置: 首页 >文章 > 做UI设计要懂的-产品的从零到一
收藏
分享

做UI设计要懂的-产品的从零到一

举报孔雅轩LineVision孔雅轩LineVision发布于 2021-03-262234阅读3点赞1评论
做UI设计要懂的产品的从零到一...

较为系统的产品基础


新手必须了解的行业工作流程。

实际工作中,我们如何去做需求分析?

提高UI设计师的产品思维。


文章重点梳理


产品定义

产品的要素

产品交互流程

产品从零到一

设计在产品中的位置

实际工作中的需求分析

产品设计的常规流程

产品中的用户体验原则

UI设计必备职能

设计与交互中情感化用户体验


前言


很多朋友会私下问我一个问题,我是新手如何学UI?我之前是平面设计,之前是电商设计,之前是网页设计....如何转行UI? UI设计好学么?这篇文章是对想要转行的朋友的一些解答。学UI之前,必须要了解的产品从零到一。


产品的定义


首先要明白产品是什么。在上一篇文章《艺术创造情绪,设计解决问题》中提到,设计是商业的,并且存在目标。在UI设计中,通过设计达到的那个目标,就是产品的价值。所以最重要的一个定义是:产品是解决问题的。而一个产品的基本定义可以从以下两个维度。


产品目的代表一个产品能解决的问题,或者说一个产品的目标。而目标人群是指前者解决了那一部分人群的问题,那部分人群就是这个产品的目标人群,也叫目标用户。把一个产品从基本定义可以拓展到以下四个维度:



消费者洞察


所谓消费者洞察,就是从消费者的角度提出其内心所关注的有关问题。但是通常用户只会根据自己的痛点或者痒点提出自己的不满,并不能给出明确的需求。因此发现用户的需求很关键。比如在没有滴滴的时代,用户存在打车困难的问题。


利益承诺


利益承诺则是根据消费者洞察,根据发现的用户需求,提出相应的解决方案。换句话说就是说明产品能为消费者提供哪些好处。比如滴滴打车,通过app在线叫车服务,可以轻松打到网约车,并且实时查看车辆位置,车牌号,司机联系方式等等。


支持点

支持点是解释产品的哪些特点是怎样解决消费者洞察中所提出的问题的。比如滴滴推出的快车,让用户随时随地可以享受叫车服务,解决打不到车的问题。而专车,给讲究生活品质的人提供了更高级别的享受。顺风车服务解决了用户打车费用昂贵的问题,让司机与乘客互利......


总结


用概括的语言(最好是一句话)将上述三点的精髓表达出来。比如:滴滴一下,美好出行。当然这只是个slogan。或者我们可以说“滴滴出行”App改变了传统打车方式,建立培养出大移动互联网时代下引领的用户现代化出行方式。

其实滴滴不仅解决了打车难的问题,而是改变了一种生活方式,一种现代化的出行方式,利用移动互联网特点,将线上与线下相融合,从打车初始阶段到下车使用线上支付车费,画出一个乘客与司机紧密相连的o2o完美闭环。除此之外还建立了人与人之间的信任(前一段时间顺风车女乘客事件对滴滴有很大影响,我私下也跟一些滴滴师傅聊过,顺风车的车主审核机制要比快车专车宽泛很多。跟这个原因有脱不开的关系吧)不过我们可以想象一下在没有滴滴的那个年代,你敢随便上陌生人的车吗?当然这是题外话了。


产品的分析


比如一个命题,我们要做运动类的产品,以运动类产品为例,首先分析产品的经济价值:最简单的就是展示运动及周边领域的广告。展示广告的方式除了简单的贴片、冠名活动,对于具有社交功能的app,还能采取核心用户评测提高广告效果的方式,同时给予核心用户稿费,这能一定程度上留住核心用户和鼓励用户发布内容成为核心用户。还有种常见的方式是premium模式,这种方式在国外app中比较常见,例如runkeeper和runtastic采用了不同的收费方式,runkeeper的高级功能要依赖他们的服务器。国内的app由于国内用户对软件付费意愿较低,所以很少采用这种方式,具体到运动app,用户的依赖更低,所以这种方式也并不会是首选。


另外还可以发挥运动app的平台属性来盈利。锻炼虽然入门容易,但是提高是有门槛的,项目的正确姿势和制定计划都可能需要人指导。所以对于核心的高级用户,可以给他们提供一个指导别人的机会,其他用户需要付费才能获取到内容,平台则可以抽取少部分的分成。在智能硬件满天飞的现在,当然还能通过生产一些运动周边工具来盈利,比如心率表、智能称、运动手环或手表等等。


那么产品的分析维度,一般从以下三个方面:




解决什么问题:首先一个 产品手下要清楚他是解决什么样的问题, 一个能够解决现实中问题的产品才有价值。在看到一个产品的时候,可以进行反问,到底有什么用? 这个产品的核心是什么?他的使用人群是什么? 只有真正了解这些, 对做一个产品来讲,接下来的工作才有意义。

功能性则是对 产品价值的详细拆解。换句话,针对解决的这些问题,是怎么解决的。 通过这个就可以分析这个产品的各个功能: 产品通过功能去实现业务, 解决用户的问题。要思考这个产品是怎么取解决这个问题的? 如果没有这个产品, 人们怎么去解决这个问题? 


同类的产品有哪些, 这些产品各有什么特色,做的好的, 做的不好的。 这个就是竞品分析了, 对产品做横向比较, 才能发现种种的不足,也是我们做产品的时候避免的。


竞品分析与用户模型


竞品分析在上篇文章中《艺术创造情绪,设计解决问题》有提到,这边一笔带过。其方向主要为:


1.学习优点需要独立思考,通过表象看到内在的本质原因。

2.开拓市场在没进入这个领域之前,想看看有哪些竞争者,重点通过多维度的横向对比判断全局。也要把竞品及用户群重合的潜在竞争对手考虑进去。

3.竞争策略重点分析优缺点,细分人群的需求满足情况,竞争策略一般会从对方的弱点及未满足的细分需求主要着手点。

4.预防性策略重点通过分析过往运营活动节奏和类型,推测竞品的可能动向,同时这个需要定期观察更新。


那么关于用户模型,个性化系统就是能够针对不同用户的信息需求表现出不同运行效果的软件,而这样的软件提供的服务就是个性化服务。个性化系统的核心是用户建模,即对用户信息需求的模型表示。


用户建模是个性化系统的核心。概括地说,用户建模是对用户信息的一种表示,主要包括三个问题:对什么建模、如何建模、如何维护模型。用户兴趣建模是一个复杂的过程,既包括用户相关信息的收集与挖掘,还包括用户兴趣的提取和表示,以及长期兴趣、近期兴趣、即时兴趣的组织与维护。以上各个方面相互联系相互作用,共同构成一个完整的用户建模体系,例如用户兴趣模型采用的表示方法决定了信息收集时必须记录的信息,同时也决定了长期兴趣、近期兴趣、即时兴趣的组织结构。



用户模型目前还没有一个统一的定义,狭义地讲:用户模型是对网站目标群体真实特征的勾勒,是真实用户的虚拟代表。建立用户模型的目的是:尽量减少主观臆测,走近用户,理解他们真正需要什么,从而知道如何更好的为不同类型用户服务。


由于临时用户模型,更多的是基于自己对用户的理解建立的,虽然快速但却容易形成偏差。所以,我们需要通过用户访谈来简单验证下。像聊天一样,生活化的提问,从简单问题开始铺垫,建立访谈氛围。



而我们搭建的用户模型,是为了更加精确的去筛选产品的目标用户,从而为用户量身定制功能,也为前期产品定义中头脑风暴发散思维所列举的每个功能进行优先级排序以及筛选否定。

产品交互流程


从上一步确定产品功能后开始梳理产品的交互逻辑。


流程图是交互设计师必须掌握的技能,一张流程图可以省去需求文档和交互文档的很多文字描述,让技术人员一目了然的明白设计意图,便于组织程序的逻辑顺序。



普遍的设计师在工作中的流程定位(橘色圈)。交互逻辑流程图一般是由公司的PM来产出总结。



UE(交互设计师,很多小公司是没有这个职位的)来负责把交互逻辑图做成原型图,也就是我们经常看到的产品线框图、低保真原型图。

原型图中包含了产品所有页面且不重复,采用连接线基于交互逻辑一一串联。页面流程图是交互设计师最核心的产出物,关键点在于逻辑清晰不遗漏,关于这一点,交互设计师可以整理自己的自查清单,包括功能清单,异常情况,逻辑判断等。



而设计师的定位,是通过视觉方案解决问题。但是只有视觉层面是远远不够的。设计师应该了解产品,了解用户。才能在执行的时候从视觉以及产品两个角度对设计本身做最合理的优化方案。如何做,在文章后面会进行分析。


产品五大要素



文章以上的内容,大概概括了产品的这五大要素。


战略层面是指产品的第一个维度,产品定义。成功的用户体验,其基础是一个被明确表达的“战略”。知道企业与用户双方对产品的期许和目标,有助于确立用户体验各方面战略的制定。例如微信的定位是熟人社交,而陌陌则是陌生人社交,两个不同的定位解决了用户不同的需求。


范围层可以理解为产品的功能及特性。比如微信可以聊天、查看朋友圈、发红包等。范围层一般是由需求决定,需求则是从用户中分析提炼而来。试想一个毫无用处的产品,有人会去下载吗?所以,如何分析提取用户需求,将需求转化为功能,也变得至关重要。


结构层相对于框架层较为抽象,我们可以将他理解为“联接”。框架层是针对于单页面的结构设计,而结构层则是将单页面连接在一起,从而形成了系统。拿APP举例,框架层决定了你点击页面icon或按钮后页面跳转到了哪一页。通过删除、组织、隐藏和转移,将复杂的结构变的简单化,也是提高用户体验的重要手段。


框架层体现了页面的结构和布局,例如banner的位置、按钮的位置。好的设计就是当用户需要的时候他恰巧就在那里。页面布局要符合用户习惯,比如将重要信息放在最佳视域。


表现层是最直观的。也就是我们的产品高保真设计。打开一个APP,你看到的所有形状、文字、色彩都属于这一层面。表现层决定了用户的第一印象,同时可以通过形状大小、字体大小、颜色深浅等因素来影响用户感知,已达到设计目的。


产品设计的常规流程




产品设计的流程经过起始需求-方案实施-落地跟踪三个主要阶段。在起始需求中一般是产品给出第一需求建议。确定需求后,开始资源排期,然后整理结构框架,产出交互文档跟产品框架,在给到设计进行高保真产出,设计产出过后一般会在设计内部进行视觉评审。评审过后会在跟产品、开发一起进行开发评审。然后交付设计稿进行开发上线。当然,上线前还会需要一个步骤就是视觉的验收。


公司的QA测试会对产品的功能性、可以性等方面测试,而视觉方面则需要设计师自己去跟进,视觉的验收要求各个公司规则不同。但是要确保上线后的产品跟设计稿还原度尽量一致。有时候因为系统问题或适配问题存在偏差是在所难免的,如果影响较大的情况下一般会针对单独机型做相应的调整。



灰度,如果对互联网软件研发行业不太了解的话,可能对这个词还是很陌生的,其实灰度测试就是指如果一个产品,要在不久的将来推出一个全新的功能,或者做一次比较重大的改版的话,要先进行一个小范围的尝试工作,然后再慢慢放量,直到这个全新的功能覆盖到所有的系统用户,也就是说在新功能上线的黑白之间有一个灰,所以这种方法也通常被称为灰度测试。通过小面积的用户来测试产品的bug,可用性等。并及时收集问题,对问题做相应措施。


灰度测试这种方法可以帮助研究团队快速试验并发现问题并在大规模推向用户之前及时把问题修正过来,很大成度上减少了不少风险的产生,所以灰度测试是很有必要的。要知道只有不断创意并完善的软件才能在激烈的市场竞争中立于不败之地,当有创意的时候,小规模的灰度测试是非常有必要的。不但满足了一部分人抢先体验的愿望同时也可以发展研发团队不容易发现的各种问题,还能收集到真正的用户体验,这些对于优化全新的系统内容都是非常有帮助的,如果没有灰度测试的话,其实和闭门造车的感觉是差不多了,在增加灰度测试以后才能真正把其推向用户。去年就有经历过抖音app在音乐选择页面的灰度测试,一部分用户是黑色底,一部分用户是白色底。


实际项目中的需求分析


首先,在实际项目中常见的业务需求有哪些呢?

  • 把购买流程优化一下

  • 课程页加一个分享到微信的功能

  • 讨论区帖子要支持顶和踩

  • 在消息中心提供清空操作等等

  • 要新增一个页面,页面是某某活动的详情页


当我们拿到一个需求的时候,通常要进行需求分析。而需求分析的目的,是帮助推进我们的设计更快的达到设计目标以及产品目标。以最右发跟拍为例。



1:目标用户是指使用某一产品或服务的典型群体,目标用户是群体,不是个体,不是指具体的某一个人。人物角色:包含姓名、家庭、工作、生活环境这些描述,但是人物角色实际上并不是现实当中存在的某一个人。



2:分析用户需求,目标用户(特征、经验)+场景+行为+用户体验目标。比如说,谁在什么时候,有什么样的行为,他又有什么目标或体验,了解用户路径,那么用户路径是什么?



3:用户路径,搞清楚用户在使用前、使用中、使用后的各个接触点,确保设计方案能够成闭环。其首要就是先明确目标用户。



所以我们对需求的拆解方向,明确目标用户,分析用户需求,明确用户路径。则可以翻译为他是谁?他要做什么?怎么做?



这有点像美团总结的故事板的设计方法论,5WH。what?where?who?when?why?how?。什么意思呢,通俗来讲就如同写小说的六大要素,时间、地点、人物、起因、经过和结果。这六个词基本定义了用户的一次行为过程。对于一个产品功能,用户在使用的时候一定有一个目标。通过产品能够达到其目的,这是一个产品的意义。所以做UI,做产品,更像是用户行为设计。产品每个细节点都可能改变用户的行为。改变用户对产品的认知与体验。建立在故事板上的用户行为设计,会更直接,更精确。


所以设计之前通常需要思考以下几个问题:

为什么要做这个功能?——业务背景

产品期望得到怎样的成果?——业务目标

谁来使用这个功能?——目标用户

他们为什么要使用这个功能?——用户需求

如何让他们都来使用这个功能?——将业务目标转化为用户行为


用户体验设计原则


如果打算做这个行业,用户体验设计原则是必须要记住且深入消化并举一反三的。前段时间跟一个工作了两年的UI聊天,聊到用户体验我问你知道用户体验设计的原则吗,他说他还真不知道。但是经过一些举例,他是明白其中道理的,只是没有用一个学术性的话语来总结。


尊重用户使用习惯、降低学习成本


系统应与真实世界相符合,使用简单易懂词汇与概念,而不是专业术语,降低用户学习成本。



就从交互手势而言,几乎所有的产品在双击图标的时候 都会进行放大,在下拉界面的时候,都会进行刷新。这一点也是产品在尊重用户已经成型的使用习惯。还有一些界面结构为阵列布局的标签,一般会使用“列表”而不用“矩阵”原因也是因为“矩阵”一词略有生僻,相对于“列表”,难以理解。


自主控制,降低操作难度


让用户有权自主中断后继续进程,尽可能避免重复或错误发生,减少操作的内容和门槛与等待时间,让复杂的内容在用户看不到的地方进行。



比如在对最右4.0改版中提到过的用户等待。尽管这个过程没有让复杂的内容(上传视频这件事情)在看不到的地方进行。但是左上角始终存在关闭按钮。用户可以随时终止进程。用户拥有自主控制权。


了解状态、差异化干扰内容


任何时候都要提供适当的反馈,让用户能随时了解系统运行的状态,提供易于检索、便于学习的帮助信息,如初现信息罗列一定要做内容的区分与整理。如初现不可逆操作一定要出现确认按钮。



标准化设计、贯穿产品形象与元素


界面设计时使用相似的操作,并且为相似的任务使用相似的元素。保证设计元素与产品相关联,风格一致会提升设计的品质感。



图形化设计、简化设计元素


不必要的元素去掉,如果没有他们系统仍可以很好的工作,那么应该撤销它。使用对象、动作和选项都要清晰可见、而且标示性强。通过图形来作为文字的描述补充,甚至代替文字描述。



设计/交互中的情感化用户体验


这个词都快听烂了,但是仍然有人不知道什么是用户体验。用户使用产品过程中建立起来的纯主观感受,就是用户体验。这种感受因为存在主观性,所以不同的人会有不同的偏差,我们无法复制一个个体去还原某个用户的感受。而设计中的用户体验,则是把只属于视觉导向层面对用户的影响,拆分出来单独来看。



举个例子两个完全不同的画面,是同一个产品不同版本下的空状态。同一个产品,两种不同的感受。明显在达成设计目标这件事情上,右边的更加接近。


而在交互中,用户使用产品的时候所带来的视觉反馈,也是现在越来越多成熟的产品越来越在乎的。例如现在很多产品都开始对界面的tabbar做一些细节的交互反馈。



总结当下UI设计师应该具备


以下基本是对文章前面内容总结概括。当下UI设计师,应该具备的三个要素。

而不是我会画图标、我会做界面、我会作动效......



视觉层面:一是图形设计,软件产品的产品“外形”设计。

交互设计层面,主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计,并且确立交互模型,交互规范。


什么是交互规范,比如一些操作手势,交互操作习惯(下拉推出、下拉刷新、左上角返回、)


三是用户测试/研究,这里所谓的“测试”,其目标恰在于测试交互设计的合理性及图形设计的美观性,主要通过以目标用户问卷的形式衡量UI设计的合理性。如果没有这方面的测试研究,UI设计的好坏只能凭借设计师的经验或者领导的审美来评判,这样就会给企业带来极大的风险。

而光是第一个层面的 视觉设计,就涵盖了以下内容:



这不是全面的,在初创的小团队中,可能还需要UI设计师来做logo、做vi、做视频、做海报、做ppt.....



这是一个能力比较综合的职位,甚至现在现在越来越多设计师开始了解前端口,开始尝试代码。但是如上图,一只木桶想盛满水,必须每块木板都一样平齐且无破损,如果这只桶的木板中有一块不齐或者某块木板下面有破洞,这只桶就无法盛满水。是说一只水桶能盛多少水,并不取决于最长的那块木板,而是取决于最短的那块木板。也可称为短板效应。一个木桶无论有多高,它盛水的高度取决于其中最低的那块木板。(来自百度百科“水桶效应”词条)。UI设计可能并非一些外行看起来这么容易转行的职业。只是现在门槛越来越低了而已。




感谢您花这么久的时间阅读完这篇文章,希望可以对你有些帮助。






作者: 孔晨Point_Vision
本文原创,未经作者允许不可转载!
更多内容,欢迎关注作者微信公众号: PRD体验研究所





1条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,637人)

电商海报设计训练营
距离开班仅剩9天66人已报名
【5月】零基础手绘插画训练营
距离开班仅剩9天54人已报名
【5月】零基础动态表情包创作训练营
距离开班仅剩26天15人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了27,078
并提交了210份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证